<template>
    <el-dialog v-model="state.dialog.player.show" top="10vh" width="1230px" @close="onClose">
        <template #header>
            <div class="title">视频播放</div>
        </template>
        <div class="device-channel-play-container">
            <div class="video-container">
                <JessibucaPlayer></JessibucaPlayer>
            </div>
            <div class="video-info">
                <el-tabs v-model="state.dialog.player.tabs.active_name" type="border-card" class="video-info-tabs">
                    <el-tab-pane label="流信息" name="stream_info">
                        <div class="stream-info-main">流信息</div>
                    </el-tab-pane>
                    <el-tab-pane label="云台控制" name="ptz_control">
                        <div class="ptz-control-main">云台控制</div>
                    </el-tab-pane>
                    <el-tab-pane label="语音对讲" name="voice_intercom">
                        <div class="voice-intercom-main">语音对讲</div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <template #footer>
            <div class="device-channel-play-footer">
                <div class="device-channel-play-url">
                    <el-input v-model="input3" style="width: 100%" placeholder="请选择播放地址" class="input-with-select">
                        <template #prepend>
                            <el-select v-model="select" placeholder="Select" style="width: 115px">
                                <el-option label="Restaurant" value="1" />
                                <el-option label="Order No." value="2" />
                                <el-option label="Tel" value="3" />
                            </el-select>
                        </template>
                    </el-input>
                </div>
                <div class="device-channel-play-button">
                    <el-button type="danger" @click="onClose">关闭</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { TableState } from '@/components/table/table';
import { DeviceChannelTableDataState, DeviceChannelTableDialogState } from '@/views/admin/devicechannel/interface';
import JessibucaPlayer from '@/components/player/JessibucaPlayer.vue';

const state = inject('state') as TableState<DeviceChannelTableDataState, DeviceChannelTableDialogState>;

const onClose = ()=>{
  state.dialog.player.show = false;
};
</script>

<style scoped lang="scss">
.device-channel-play-container {
    display: flex;
    flex-direction: row;
    width: 1200px;
    height: 432px;

    .video-container {
        width: 768px;
    }

    .video-info {
        flex: 1;
        padding-left: 5px;
        padding-right: 5px;
    }

    .video-info-tabs {
        width: 100%;
        height: 432px;
    }
}

.device-channel-play-footer {
    display: flex;
    flex-direction: row;

    .device-channel-play-url {
        width: 768px;
    }

    .device-channel-play-button {
        flex: 1;
    }
}
.stream-info-main {
    height: 372px; /** 432 -45 -15 */
}
.ptz-control-main {
    height: 372px; /** 432 -45 -15 */
}
.voice-intercom-main {
    height: 372px; /** 432 -45 -15 */
}
</style>
